<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .text {
            text-decoration: line-through;/*下划线-删除线*/
        }
        .text1 {
            text-decoration: overline;/*上划线*/
        }
        .other-class {
            text-decoration: underline;/*下划线*/
        }
        .red{
            color:red;
        }
    </style>
    <title>0324class</title>
</head>
<body>
    <div id="app">
        <p :class="class1+1">1-1.通过vue控制class-字符串拼接 </p>
            <!--整体用“”双引号，class1是个变量用[]包裹,根据hasClass(变量)的值判断要不要添加class1这个class属性-->
        <p :class="{[class1]: hasClass}">2-1.通过vue控制class-对象object </p>
            <!--带有连接符-的要用‘’单引号包起来，便于js识别-->
        <p :class="{'other-class': hasClass}">2-2.通过vue控制class-object带连接符 </p>
        <p :class="{'other-class': hasClass}" class="red">2-3.通过vue控制class--多共存 </p>
        <p :class="{text: hasClass,red: hasClass}" >2-4.通过vue控制class-复共存 </p>
        <p :class="classObj" >2-5.通过vue控制class--对象 </p>
        <p :class="computedclassObj" >2-6.通过vue控制class--计算属性 </p>
            <!--通过点击按钮，来控制hasClass变量，从而控制属性-->
        <button @click="hasClass=!hasClass">toggle</button>
        <hr>
        <span :class="huluwaList[0]">大娃</span>
        <span :class="huluwaList[1]">二娃</span>
        <span :class="huluwaList[2]">三娃</span>
        <span :class="huluwaList[3]">四娃</span>
        <span :class="huluwaList[4]">五娃</span>
        <span :class="huluwaList[5]">六娃</span>
        <span :class="huluwaList[6]">七娃</span>
        
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let vm=new Vue({
            el:'#app',
            data: {
               class1:'text',
               hasClass: true,
               huluwaList:[
                   'yi','er','san','si','wu','liu','qi'
               ],
               classObj:{
                    text: true,
                    red: true
               }
            },
            computed: {
                computedclassObj:function(){
                    return {
                        'other-class': true,
                        red: true
                    }
                }
            },
        })
    </script>
</body>
</html>